<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Demo of all easing styles</title>
	<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
	<script src="../node_modules/jquery/dist/jquery.js"></script>
	<script src="../jquery.easing.js"></script>

	<style media="screen">
	#bounds {
		width: 250px;
		height: 250px;
		border: 1px solid #888;
	}
	#box {
		height: 50px;
		width: 50px;
		background: black;
	}
	</style>

	<script>
/* globals $ */
$(function() {
	var easings = $.map( $.easing, function( fn, key ) {
			return $.isFunction( fn ) ?
				"<option value='" + key + "'>" + key + "</option>" :
				null;
		}),
		current = 0,
		positions = [
			{
				marginTop: "0px",
				marginLeft: "0px"
			}, {
				marginTop: "200px",
				marginLeft: "200px"
			}
		];

	$( "#easing" ).html( easings );
	$( "#run" ).on( "click", function() {
		var duration = +$( "#duration" ).val(),
			easing = $( "#easing" ).val(),
			start = Date.now();

		if ( Number.isNaN( duration ) ) {
			duration = 1000;
			$( "#duration" ).val( duration );
		}

		$( "#status" ).text( "Animating..." );

		// Alternate positions
		current = current ^ 1;
		$( "#box" ).animate( positions[current], duration, easing,
			function() {
				$( "#status" ).text( "Done (" + (Date.now() - start)/1000	 + " seconds)" );
			}
		);
	});
});
	</script>
</head>
<body>
<h1>Demo of all easing styles</h1>
<p id="status">Choose an easing method and press Run</p>
<p>
	<label for="easing">Easing: </label>
	<select id="easing"></select><br />
	<label for="duration"> Duration (seconds): </label>
	<input type="text" id="duration" size="10" value="1000" /><br />
	<button id="run">Run</button>
</p>
<div id="bounds">
	<div id="box"></div>
</div>

</body>
</html>
